<template>
  <div>
    <div class="es-sdk-content-column-css">
      <div class="es-sdk-content-row-css">
        <text-button text="获取文章" @onButtonClicked="getArticle"/>
        <text-button text="播放" @onButtonClicked="play"/>
        <text-button text="滚动" @onButtonClicked="scroll"/>
        <text-button text="定位" @onButtonClicked="focus"/>
      </div>
    </div>
    <scroll-play ref="playView"/>
  </div>
</template>

<script>

import { ESPage, ESToast,ESKeyEvent } from '@extscreen/es-core';
import ScrollPlay from "./ScrollPlay.vue";
import {ESLog} from "@extscreen/es-log";
export default {
  name: 'index',
  mixins: [ESPage,ESKeyEvent],
  data() {
    return {
    };
  },
  methods: {
    onESCreate(params) {
      this.$refs.playView.init()
    },
    getArticle(){
      let that=this
      fetch('http://175.178.42.168:9999/api/article/1',{
        method: 'GET',
        headers: {
      },
    }).then(res=>{
        // ESToast.showToast(JSON.stringify(res.body))
        let body=JSON.parse(res.body)
        if (body.code==1){
          that.$refs.playView.setSentences(body.data.sentences)
        }
      }).catch(res=>{
        ESToast.showToast("网络异常")
      })

    },
    //按下
    onKeyDown(keyEvent) {
      // ESToast.showToast(keyEvent)
    },
    //抬起
    onKeyUp(keyEvent) {
      // ESToast.showToast(keyEvent)
    },
    play(){
      this.$refs.playView.play()
    },
    scroll(){
      this.$refs.playView.scroll();
    },
    focus(){
      this.$refs.playView.focus()
    }
  },
  components: {
    ScrollPlay
  }
};
</script>

<style scoped>

</style>
